<style lang="scss" scoped>
  .van-tabbar-item__text{
    font-size: 1.3rem !important;
  }
  .tabbar{
    z-index: 100;
  }
</style>
<template>
  <van-tabbar
    class="tabbar"
    v-model="active"
    :active-color="activeColor"
    :inactive-color="inactiveColor"
    title-class="fs-14"
    @change="tabChange"
  >
    <van-tabbar-item
      v-for="(item,index) in tabbar"
      :key="index"
      :icon="active === index ? item.activeIcon : item.inactiveIcon"
      >{{ item.text }}</van-tabbar-item
    >
    <!-- <van-tabbar-item v-for="item in tabbar" :key="item.id">
      <span>{{item.text}}</span>
      <template #icon="props">
        <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
      </template>
    </van-tabbar-item> -->
  </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
  components: {
   [Tabbar.name]: Tabbar,
   [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
      activeColor: "#1989fa",
      inactiveColor: "#7d7e80",
      tabbar:[{
        id:0,
        activeIcon: "gift-o",
        inactiveIcon: "gift-o",
        text: "商品列表"
      },{
        id:1,
        activeIcon: "coupon-o",
        inactiveIcon: "coupon-o",
        text: "订单列表"
      },{
        id:2,
        activeIcon: "bar-chart-o",
        inactiveIcon: "bar-chart-o",
        text: "订单统计"
      },{
        id:3,
        activeIcon: "balance-list-o",
        inactiveIcon: "balance-list-o",
        text: "余额明细"
      }]
    }
  },
  mounted () {
    const _this = this;
	_this.initActive()
  },
  methods: {
    initActive() {
      const _this = this;
      //初始化active
      let params = window.location.hash;
      let hash = params.substr(2);
	  console.log("hash",hash)
      switch(hash) {
        case 'home':
            _this.active = 0;
            document.title = _this.tabbar[_this.active].text
            break;
        case 'orderList':
            _this.active = 1;
            document.title = _this.tabbar[_this.active].text
            break;
		case 'orderStatistics':
		    _this.active = 2;
		    document.title = _this.tabbar[_this.active].text
		    break;
		case 'balance':
		    _this.active = 3;
		    document.title = _this.tabbar[_this.active].text
		    break;
        default:
            _this.active = 0;
      }
    },
    tabChange(key) {
      const _this = this;
      switch (key) {
        case 0:
          _this.$router.replace('/home');
          document.title = _this.tabbar[key].text
          break;
        case 1:
          _this.$router.replace('/orderList');
          document.title = _this.tabbar[key].text
          break;
		case 2:
		    _this.$router.replace('/orderStatistics');
		    document.title = _this.tabbar[key].text
		    break;
		case 3:
		  _this.$router.replace('/balance');
		  document.title = _this.tabbar[key].text
		  break;
        default:
          break;
      }
    }
  }
};
</script>
